<template>
  <div id="centreLeft2">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span style="color: #5cd9e8;">
          <icon name="chart-pie" />
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2">地图数据</span>
          <dv-decoration-1 style="width: 1.25rem; height: 0.25rem; position: relative; top: -0.0375rem;" />
        </div>
      </div>
      <div class="d-flex jc-center">
        <div id="mapChart" style="margin-left: 0.01rem; width: 90%; height: 21.5rem;" />
      </div>
    </div>
  </div>
</template>

<script>
//import CentreLeft2Chart from "@/components/echart/centerLeft/centerLeft2Chart";
import '@/util/guangxi-cz'
export default {
    name: 'MapChart',
    components: {
        //CentreLeft2Chart
    },
    data() {
        return {
            seriesData: [
                {
                    name: "江州区",
                    value: 3
                },
                {
                    name: "扶绥县",
                    value: 2
                },
                {
                    name: "宁明县",
                    value: 5
                },
                {
                    name: "龙州县",
                    value: 0
                },
                {
                    name: "大新县",
                    value: 0
                },
                {
                    name: "凭祥市",
                    value: 1
                },
                {
                    name: "天等县",
                    value: 2
                }
            ],
            option: {
                showLegendSymbol: true,
                tooltip: {
                    trigger: 'item',
                    textStyle: {
                        fontSize: 14,
                        lineHeight: 22
                    },
                    position: point => {
                        // 固定在顶部
                        return [point[0] + 50, point[1] - 20]
                    }
                    // 如果需要自定义 tooltip样式，需要使用formatter
                    /*
              formatter: params => {
                return `<div style=""> ... </div>`
              }
            */
                },
                visualMap: {
                    min: 0,
                    max: 10,
                    show: false,
                    seriesIndex: 0,
                    // 颜色
                    inRange: {
                        color: ['rgba(41,166,206, .5)', 'rgba(69,117,245, .9)']
                    }
                },
                // 底部背景
                geo: {
                    show: true,
                    aspectScale: 0.85, // 长宽比
                    zoom: 1.2,
                    top: '10%',
                    left: '16%',
                    map: '崇左',
                    roam: false,
                    itemStyle: {
                        normal: {
                            areaColor: 'rgba(0,0,0,0)',
                            shadowColor: 'rgba(7,114,204, .8)',
                            shadowOffsetX: 5,
                            shadowOffsetY: 5
                        },
                        emphasis: {
                            areaColor: '#00aeef'
                        }
                    }
                },
                series: [
                    {
                        name: '相关指数',
                        type: 'map',
                        aspectScale: 0.85, // 长宽比
                        zoom: 1.2,
                        mapType: '崇左', // 自定义扩展图表类型
                        top: '10%',
                        left: '16%',
                        itemStyle: {
                            normal: {
                                color: 'red',
                                areaColor: 'rgba(19,54,162, .5)',
                                borderColor: 'rgba(0,242,252,.3)',
                                borderWidth: 1,
                                shadowBlur: 7,
                                shadowColor: '#00f2fc'
                            },
                            emphasis: {
                                areaColor: '#4f7fff',
                                borderColor: 'rgba(0,242,252,.6)',
                                borderWidth: 2,
                                shadowBlur: 10,
                                shadowColor: '#00f2fc'
                            }
                        },
                        label: {
                            formatter: params => `${params.name}\n${params.value}`,
                            show: true,
                            position: 'insideRight',
                            textStyle: {
                                fontSize: 14,
                                color: '#efefef'
                            },
                            emphasis: {
                                textStyle: {
                                    color: '#fff'
                                }
                            }
                        },
                        data: []
                    }
                    
                ]
            },
            mapChart: null
        }
    },
    mounted() {
        // 在mounted中初始化echarts
        this.seriesData.forEach(element => {
            this.option.series[0].data.push(element)
        })
        this.getMapChart()
    },
    methods: {
        // 设置折线图
        getMapChart() {
            this.mapChart = this.$echarts.init(document.getElementById('mapChart'))
            console.log(this.option.series.data)
            // this.$echart.registerMap('china', chinaJson)
            this.mapChart.setOption(this.option)
        }
    }
};
</script>

<style lang="scss">
#centreLeft2 {
    padding: 0.2rem;
    height: 22.4rem;
    min-width: 3.75rem;
    border-radius: 0.0625rem;
    .bg-color-black {
        height: 22.125rem;
        border-radius: 0.125rem;
    }
    .text {
        color: #c3cbde;
    }
}
</style>